<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <script src="/vue_basic/js/vue.js"></script> -->
    <script src="/the-good-thing-of-wang-feizhai/vue_basic/js/vue.js"></script>
    <title>计算属性</title>
</head>
<body>
<!-- 
    computedHlwatch之间的区别:
        1.computed能完成的功能,watch都可以完成。
        2.watch能完成的功能,computed不一定能完成，例如: watch可以进行异步操作。(比如修改后等待一秒再去改变,setTimeout)
    两个重要的小原则:
        1.所被Vue管理的函数。最好写成普通函数,这样this的指向才是vm或组件实例对象.
        2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等），最好写成箭头函数，
            这样this的指向才是vm或组件实例对象- 
-->


    <div id="root">
        姓:<input type="text" v-model="firstName"><br>
        名:<input type="text" v-model="lastName"><br>
        姓名:<span>{{firstName+'-'+lastName}}</span><br>
        姓名:<span>{{fullName}}</span><br>
    </div>
    
</body>
<script>
    const vm = new Vue({
        el:'#root',
        data:{
            firstName:'张',
            lastName:'三',
            fullName:'张-三',
        },
        computed:{
            // 简写
        },
        watch:{
            firstName(newValue){
                // setTimeout得使用箭头函数
                // 使用普通函数this会混乱(会指向window,this.fullName会变成window.fullName)
                // 使用箭头函数时函数没有自己的this,所以会向外寻找this(vm)(setTimeout(箭头函数) => firstNmae(普通函数,有this)找到firstName的this => vm)
                // 虽然setTimeout是Vue管理的一个叫firstName的函数中开启的
                // 但是定时器(setTimeout)所指定的回调是不受Vue控制的,由浏览器的定时器管理模块控制的,定时器到点了也是由JS引擎帮忙调用的
                setTimeout(()=>{
                    this.fullName = newValue+ '-' +this.lastName
                },1000)
            },
            lastName(newValue){
                this.fullName = this.firstName+ '-' +newValue
            }
        },

    })
</script>
</html>